<template>
	<view class="page-index">
		<view class="index-banner">
			<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="2000" :duration="500">
				<swiper-item v-for="(item,index) in inswiper" :key="index">
					<view class="swiper-item">
						<image :src="item.one"></image>
					</view>
				</swiper-item>

			</swiper>
		</view>
		<view class="index-tools">
			<!-- 			金刚区功能图标 -->
			<view class="index-tools-item" v-for="(item,index) in toolsList" :key="index">
				<view class="item-img">
					<image :src="item.img" mode=""></image>
				</view>
				<view class="item-title">
					<text>{{item.title}}</text>
				</view>
			</view>
		</view>

		<view class="index-title">
			<view class="title-line">
			</view>
			<view class="title-name">
				最 新 文 章
			</view>
			<view class="title-line">
			</view>
		</view>
		<view class="index-article">
			<view class="index-article-item" v-for="(item,index) in articleList" :key="index">
				<view class="article-left">
					<image :src="item.img"></image>
				</view>
				<view class="article-right">
					<view class="article-header">
						<view class="article-title">{{item.title}}</view>
						<view class="article-info">{{item.info}}</view>
					</view>
					<view class="article-footer">
						<view class="user">{{item.user}}</view>
						<view class="time">{{item.time}}</view>
					</view>
				</view>

			</view>
		</view>

		<view class="index-title">
			<view class="title-line">

			</view>
			<view class="title-name">
				热 门 商 品
			</view>
			<view class="title-line">

			</view>
		</view>
		<view class="index-goods">
			<view class="index-goods-list" v-for="(good,index) in goods" :key="index">
				<image :src="good.img"></image>

				<view class="index-goods-title">
					{{good.title}}
				</view>
				<view class="index-goods-whole">
					<view class="index-goods-whole-left">
						{{good.content}}
					</view>
					<view class="index-goods-whole-right">
						{{good.number}}
					</view>
				</view>
				<view class="index-goods-all">
					<view class="index-goods-all-price">
						{{good.price}}
					</view>
					<view class="index-goods-all-goods">
						{{good.goods}}
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 	title: 'Hello'


				toolsList: [{
					img: "../../static/数码.png",
					title: "数码"
				}, {
					img: "../../static/文具耗材.png",
					title: "文具"
				}, {
					img: "../../static/母婴.png",
					title: "母婴"
				}, {
					img: "../../static/天猫家电.png",
					title: "家电"
				}, {
					img: "../../static/家居日用.png",
					title: "日用"
				}],
				articleList: [{
					img: "../../static/文章1.jpg",
					title: "十九大代表邓恢林走进社区院坝会 和群众面对面答疑解惑",
					info: "今天上午，十九大代表、重庆市政府党组成员、市公安局党委书记、局长邓恢林再次来到社区群众、派出所民警身边，面对面宣讲十九大精神。",
					user: "张三",
					time: "2024年9月27日"
				}, {
					img: "../../static/文章2.jpg",
					title: "诸葛亮",
					info: "诸葛亮（181年－234年10月8日），字孔明，号卧龙（也作伏龙），汉族，徐州琅琊阳都（今山东临沂市沂南县）人，三国时期蜀汉丞相，杰出的政治家、军事家、散文家。",
					user: "李四",
					time: "2024年9月28日"
				}, {
					img: "../../static/文章3.jpg",
					title: "李白",
					info: "李白（701年2月28日—762年12月）?[28]，字太白，号青莲居士?[20]，出生于蜀郡绵州昌隆县（今四川省绵阳市江油市青莲镇?[131]）。",
					user: "王五",
					time: "2024年9月29日"
				}],
				goods: [{
					img: "../../static/shop1.png",
					title: "配饰季-911GT3模型",
					content: "首单折扣",
					number: "满300减50",
					price: "￥358.00",
					goods: "已售1000+",
				}, {
					img: "../../static/shop2.png",
					title: "配饰季-911GT3模型",
					content: "首单折扣",
					number: "满300减50",
					price: "￥328.00",
					goods: "已售1000+",

				}, {
					img: "../../static/shop3.png",
					title: "配饰季-911GT3模型",
					content: "首单折扣",
					number: "满300减50",
					price: "￥598.00",
					goods: "已售1000+",

				}, {
					img: "../../static/shop4.png",
					title: "配饰季-911GT3模型",
					content: "首单折扣",
					number: "满300减50",
					price: "￥1380.00",
					goods: "已售1000+",

				}, {
					img: "../../static/shop5.png",
					title: "配饰季-911GT3模型",
					content: "首单折扣",
					number: "满300减50",
					price: "￥358.00",
					goods: "已售1000+",

				}, {
					img: "../../static/shop6.png",
					title: "配饰季-911GT3模型",
					content: "首单折扣",
					number: "满300减50",
					price: "￥358.00",
					goods: "已售1000+",
				}, ],
				inswiper:[{
					one:"../../static/图片.jpg"
				},{
					one:"../../static/图片1.jpg"
				},{
					one:"../../static/文章1.jpg"
				},],
				
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.page-index {
		.index-banner {
			width: 100%;
		}
		.swiper{
			height: 300px;
			.swiper-item{
				height: 300px;
				line-height: 300px;
				text-align: center;
			}
		}

		.index-tools {
			display: flex;

			.index-tools-item {
				flex: 1;
				display: flex;
				flex-flow: column;
				justify-content: center;
				align-items: center;

				.item-img {
					width: 48px;
					height: 48px;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.item-title {
					font-size: 12px;
					line-height: 24px;
				}
			}
		}

		.index-title {
			display: flex;
			align-items: center;

			.title-name {
				font-size: 22px;
				font-weight: 600;
				width: 120px;
				text-align: center;
			}

			.title-line {
				width: 100%;
				flex: 1;
				height: 3px;
				background-color: #B8B8B8;
			}
		}

		.index-article-item {
			border-radius: 15px;
			opacity: 1;
			background: #FFFFFF;
			box-sizing: border-box;
			border: 1px solid rgba(186, 191, 193, 0.69);
			box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
			display: flex;
			padding: 10px;

			.article-left {
				width: 90px;
				height: 100px;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.article-right {
				padding-left: 12px;
				display: flex;
				flex: 1;
				flex-flow: column;
				justify-content: space-between;

				// .article-header {

				// 	.article-title {
				// 		font-size: 16px;
				// 		color: #3D3D3D;
				// 	}
				// }


				.article-footer {
					width: 100%;
					display: flex;
					justify-content: space-between;
				}
			}
		}

		.index-goods {
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-gap: 12px;
			align-items: center;
			justify-items: center;

			.index-goods-list {
				background-color: #FFFFFF;
				box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
				width: 320px;
				border-radius: 15px;
				margin: 0 10px 0 10px;

				.index-goods-title {
					font-size: 28px;
					font-weight: 500;
					margin-top: 10px;
					margin-left: 10px;
				}

				.index-goods-whole {
					display: flex;

					.index-goods-whole-left {
						font-size: 24px;
						font-weight: 600;
						color: #EB3C3C;
						margin-left: 10px;
					}

					.index-goods-whole-right {
						font-size: 20px;
						color: #E4C675;
						margin-left: 10px;
					}
				}

				.index-goods-all {
					display: flex;
					align-items: center;

					.index-goods-all-price {
						font-size: 25px;
						color: #EB3C3C;
						font-weight: 600;
						margin-left: 10px;
					}

					.index-goods-all-goods {
						font-size: 20px;
						color: rgba(109, 109, 109, 0.85);
						font-weight: 600;
						margin-left: 10px;
					}
				}
			}
		}
	}
</style>